<template>
	<view class="content">
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">藏品图片*</text>
			</view>
			<view style="padding:9rpx 15rpx;line-height: 50rpx;">
				<view class="">
					请上传两张以上清晰图片(至少上传一张全图)，加急审核建议上传4张以上图片
				</view>
				<view style="color: red;">
					每次只能提交—件藏品(套件可同时提交)
				</view>
			</view>
			<view class="potho-view">
				<view class="potho-item" v-for="(item,index) in pothoArr" :key="index">
					<image class="potho" :src="item"></image>
					<image class="delete" @click="deletePotho(index)" src="../../../static/images/delete.png"></image>
				</view>
				<view class="potho-item addPotho" @click="addpotho">+</view>
			</view>
		</view>
		<view class="group">
			<view class="group-header">
				<text class="group-header-title"> 鉴品名称*</text>
			</view>
			<view class="input-view">
				<input   v-model="form.treasure_name" placeholder="请输入鉴品名称" />
			</view>
		</view>
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">描述*</text>
			</view>
			<view class="input-view">
				<textarea v-model="form.treasure_description" placeholder="请输入鉴品描述" />
			</view>
		</view>
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">姓名*</text>
			</view>
			<view class="input-view">
				<input   v-model="form.user_name" placeholder="请输入鉴品人电话姓名" />
			</view>
		</view>
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">电话*</text>
			</view>
			<view class="input-view">
				<input   v-model="form.user_phone" placeholder="请输入鉴品人电话" />
			</view>
		</view>
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">地址*</text>
			</view>
			<view class="input-view">
				<input   v-model="form.address_detail" placeholder="请输入鉴品人地址" />
			</view>
		</view>
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">是否开启加急通道？加急通道讲于一个小时内提供审核结果</text>
			</view>
			<view class="input-view">
				<radio-group @change="radioChange">
				<label class="radio"><radio value="0" :checked="form.is_urgent==0" color="#00acfe"/>普通</label>
				<label class="radio" style="margin-left: 20rpx;"><radio value="1" :checked="form.is_urgent==1" color="#00acfe"/>加急</label>
				</radio-group>
			</view>
		</view>
		<view class="coupon"  @tap='couponTap'>
			<view>{{couponInfo.coupon_title || "请选中备案优惠券"}}</view> <image src="../../../static/images/right-icon.png" mode=""></image>
		</view>
		<view style="margin-top: 20rpx;">
			<image :src="content" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view style="height: 100upx;">
			
		</view>
		<view class="bottom-view">
			<view class="price">
				共需支付：{{lastprice}} 元
			</view>
			<view class="commint-btn" @click="commintAppoinment">支付</view>
		</view>
	<couponListWindow :coupon='coupon' @ChangCouponsClone="ChangCouponsClone" :openType='openType'  
		@ChangCoupons="ChangCoupons"></couponListWindow>	
	</view>
</template>

<script>
	import {
		trendsPublishTreasure,
		trendsDetail,
		appointmentAPI,getbeanAPI,paybeianAPI,getbeiancouponsAPI
	} from '@/api/peopleHide.js'
	import couponListWindow from '@/components/couponListWindow2';
	export default {
		components:{couponListWindow},
		data() {
			return {
				openType: 1,
				coupon: {
					coupon: false,
					list: [],
					statusTile: '立即使用'
				},
				cartId:"",
				title: '',
				content: '',
				pothoArr: [],
				joinType: 1, //1 添加  2编辑
				
				form:{
					order_price:"",
					coupon_id:"",
					coupon_price:"0",
					is_urgent:"0"
				},
				price:"",
				couponInfo:{}
			}
		},
		computed:{
			lastprice(){
				if(this.couponInfo.coupon_price){
					if(this.price > this.couponInfo.coupon_price){
						return this.price-this.couponInfo.coupon_price
					}else{
						 
						return 0
					}
					
				}
				return this.price
			}
		},
		onLoad(options) {
			this.getCouponList()
				this.getbean(1)
			
		},
		methods: {
			getCouponList: function() {
				let that = this;
				let data = {
				 
				}
				getbeiancouponsAPI().then(res => {
					that.$set(that.coupon, 'list', res.data);
					that.openType = 1;
				});
			},
			ChangCouponsClone: function() {
				this.$set(this.coupon, 'coupon', false);
				
			},
			ChangCoupons: function(e) {
				var coupon=this.coupon.list[e]
				console.log(coupon)
				if(coupon.use_min_price <=0){
					this.couponInfo=this.coupon.list[e]
					this.form.coupon_id=this.couponInfo.id
					this.form.coupon_price=this.couponInfo.coupon_price
					this.coupon.coupon = false;
				}else{
					if (coupon.use_min_price > this.price) {
						uni.showToast({
							title:"暂未达到使用门槛",
							icon:"none"
						})
					} else{
						this.couponInfo=this.coupon.list[e]
						this.form.coupon_id=this.couponInfo.id
						this.form.coupon_price=this.couponInfo.coupon_price
						this.coupon.coupon = false;
					} 
				}
				
				 
			},
			couponTap: function() {
				this.coupon.coupon = true;
				this.coupon.list.forEach((item, index) => {
					if (item.id == this.couponId) {
						item.is_use = 1
					} else {
						item.is_use = 0
					}
				})
				this.$set(this.coupon, 'list', this.coupon.list);
			},
			radioChange(evt){
				this.form.is_urgent=evt.detail.value
				
				if (evt.detail.value=="0") {
					this.price=this.generalprice
					this.form.order_price=this.generalprice
				} else if (evt.detail.value=="1"){
					this.price=this.pricevip
					this.form.order_price=this.pricevip
				}
				console.log(evt.detail.value,this.price)
			},
			getbean(){
			  getbeanAPI().then(res=>{
				  let objc = res.data.record
				  this.generalprice = objc.title
				  this.pricevip = objc.content2
				  this.content = objc.content
				  this.price = objc.title
				  this.form.order_price=objc.title
				  // this.pothoArr = objc.images_urls
			  })	
			},
			deletePotho(e) {
				let that = this
				uni.showModal({
					content: '删除该图片？',
					success(res) {
						if (res.confirm) {
							that.pothoArr.splice(e, 1)
						}
					}
				})

			},
			paybeian(data) {
				let that = this
				 paybeianAPI(data).then(res=>{
						let jsConfig=res.data.result.jsConfig
						uni.requestPayment({
							timeStamp: jsConfig.timestamp,
							nonceStr: jsConfig.nonceStr,
							package: jsConfig.package,
							signType: jsConfig.signType,
							paySign: jsConfig.paySign,					
							success: function (rest) {
								console.log('success:' , rest);
								 
							},
							fail: function (err) {
								 
								console.log('fail:',err);
							}
						})
					})
			},
			addpotho: function(type) {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					that.pothoArr.push(res.data.url)

				});
			},
			 
			commintAppoinment() {
				if(this.pothoArr.length<1){
					uni.showModal({
						title: '提示',
							content: '请上传藏品图片',
							success: function (res) {
								return false
							}
					})
					return false
				} 
				if (this.form.treasure_description=="" || this.form.treasure_description==null) {
					uni.showModal({
						title: '提示',
							content: '请填写藏宝描述',
							success: function (res) {
								return false
							}
					})
					return false
				}
				
				let pamaDIct = {
					 ...this.form,
					img_list: this.pothoArr.join(',')
				}				 
				appointmentAPI(pamaDIct).then(res => {
					this.paybeian({...pamaDIct,order_sn:res.data.order_sn})					 
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 114upx;
		padding: 20rpx;
	}
.coupon{
	display: flex;
	align-items: center;
	background-color: #f86a62;
	padding: 10rpx;
	color: #fff;
	border-radius: 10rpx;
	view{
		flex: 1;
		text-align: center;
	}
	image{
		width: 50rpx;
		height: 50rpx;
	}
}
	.group {
		background-color: #fff;
		width: 100%;
		margin-bottom: 20upx;
		display: flex;
		flex-direction: column;

		.group-header {
			display: flex;
			align-items: center;
			position: relative;
			width: 100%;
			height: 80upx;

			.group-header-title {
				color: #333;
				font-size: 28upx;
				font-weight: 400;
				margin-left: 30upx;
			}
		}

		.group-header:after {
			position: absolute;
			content: '';
			left: 0;
			width: 8upx;
			height: 40upx;
			background-color: #0A77DE;
		}

	}

	.input-view {
		 
		width: 690upx;
		 
		padding: 10upx;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #F9F9F9;
		margin: 0 auto  ;
		border: 1px solid #f9f9f9;
	}

	.potho-view {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		// height: 100upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.potho-item {
		position: relative;
		width: 200upx;
		height: 200upx;
		border-radius: 8upx;
		margin-right: 30upx;
		margin-bottom: 20upx;

		.potho {
			width: 100%;
			height: 100%;
			border-radius: 8upx;
			// background-color: #1ABB1D;
		}
	}

	.addPotho {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F7F7F7;
		color: #CCCCCC;
		font-size: 70upx;
		font-weight: 600;
	}

	.potho-item:nth-of-type(3n) {
		margin-right: 0;
	}

	.delete {
		position: absolute;
		width: 48upx;
		height: 48upx;
		right: -18upx;
		top: -18upx;
	}

	.bottom-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 94upx;
		width: 100%;
		background-color: #fff;
		z-index: 999;
		.price{
			padding-left: 30rpx;
			color: #0A77DE;
			font-weight: bold;
			font-size: 30rpx;
		}	
		.commint-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 300upx;
			height: 88upx;
			opacity: 1;
			background: #0A77DE;
			// border-radius: 56upx;
			color: #fff;
			font-size: 32upx;
			font-weight: 500;
		}
	}
</style>
